
<!--
 * @Author: your name
 * @Date: 2020-09-15 19:24:00
 * @LastEditTime: 2020-12-21 11:03:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸\html\face-recognition\src\views\Layout\components\Headnav.vue
-->
<style lang="less" scoped>
.data_image {
  //  display: flex;
  //  justify-content: space-between;
  //  flex-wrap: wrap;
li {
  width: 150px;
  height: 150px;
  border: 1px #eee solid;
  overflow: hidden;
  position: relative;
  background: #eee;
  cursor: pointer;
  font-size: 0;
  float: left;
  margin-right: 13px;
  margin-bottom: 13px;
  float: left;
  .fd {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.4s;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    .el-icon-zoom-in {
      color: #fff;
      font-size: 40px;
      transition: all 0.4s;
    }
  }
  .fd + div,
  .fd + div img {
    width: 100%;
    // height: 100%;
  }
  &:hover {
    .fd {
      opacity: 1;
    }
    .el-icon-zoom-in {
      transform: scale(1.15, 1.15);
    }
  }
  }
  li:nth-child(11n + 11) {
    margin-right: 0;
  }
}
.showImageFd {
  width: 100%;
}
/deep/.el-dialog,
.el-pager li {
  background: transparent;
}
/deep/.el-dialog__body,
/deep/.el-dialog__header {
  padding: 0 !important;
}
/deep/.el-dialog__body {
  box-shadow: 0 0 30px #fff;
  border-radius: 10px;
  overflow: hidden;
}
/deep/.el-dialog__close {
  color: #fff;
  position: relative;
  top: -59px;
  font-size: 50px;
  left: 53px;
}
/deep/.el-icon-close:before {
  content: "\E78D";
}
.imgtip {
  line-height: 60px;
  width: 100%;
  color: #909399;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}
#canvas {
  position: absolute;
  z-index: -1;
top: -1000px;
}
</style>
<template>
  <div class="dataDisplay">
    <el-form :inline="true" :model="dataDisplay">
      <el-form-item label="用户名"> <el-input v-model.trim="dataDisplay.username" placeholder="用户名" disabled></el-input></el-form-item>
      <el-form-item label="设备SN">
        <!-- <el-select v-model="dataDisplay.sn" filterable placeholder="全部">
          <el-option
            v-for="SN in dataDisplay.sn_list"
            :key="SN.value"
            :value="SN.SN"
          ></el-option>
        </el-select> -->
        <el-input v-model.trim="dataDisplay.sn" placeholder="设备SN"></el-input>
      </el-form-item>
      <el-form-item label="图像类型">
        <el-select v-model="dataDisplay.imagetype" placeholder="全部" @change="imageType_change">
          <el-option v-for="(type, index) in dataDisplay.imagetype_list" :key="index" :value="type.tit"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间节点">
        <el-date-picker v-model="dataDisplay_date"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="创建日期"
          end-placeholder="结束日期"
          align="right"
          unlink-panels
          @change="changeDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item><el-button type="primary" @click="onSearch"><i class="el-icon-search"></i><span>查询</span></el-button></el-form-item>
    </el-form>
    <ul class="data_image clearfix" v-loading="table_loading">
      <i v-if="imgTip" class="imgtip">暂无数据</i>
      <li v-for="(data_image, index) in dataDisplay.data_images" :key="index" @click="imgageFd(index)">
        <div class="fd"> <i class="el-icon-zoom-in"></i> </div>
        <div><img :src="data_image.url"/></div>
      </li>
    </ul>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagingParams['current']"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pagingParams['size']"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagingParams['total']"
    ></el-pagination>
    <!-- 查看大图容器 -->
    <el-dialog :visible.sync="imageBox" width="58%"><img :src="showImageFd" class="showImageFd" /></el-dialog>
    <canvas id="canvas" width="640" height="480"></canvas>
  </div>
</template>
<script>
import { imagedata, imageUint, imgImport } from "@/api/dataDisplay"
import { mapState, mapMutations } from "vuex"
import moment from "moment"
import html2canvas from "html2canvas"
import { pickerOptions } from '@/utils'
import { getUser } from '@/utils/auth'
import { getImages } from '@/api/public'
 
export default {
  name: "dataDisplay",
  data() {
    return {
      imgTip: false,
      imageBox: false,
      showImageFd: "",
      table_loading: false,

      dataDisplay: {
        username: getUser().username,
        region: "",
        imagetype: "彩色图",
        sn: "",
        sn_list: [],
        imagetype_list: [
          {
            type: "0",
            tit: "彩色图",
          },
          {
            type: "1",
            tit: "深度图",
          },
          {
            type: "2",
            tit: "红外图",
          },
          {
            type: "3",
            tit: "人脸",
          },
        ],
        // 缩略图列表
        data_images: [
          {
            url: require('../../assets/img/002.png'),
          },
          {
            url: require('../../assets/img/003.png'),
          },
        ],
      },
      pagingParams: {
        // username: "",
        // userId: "",
        sn: "",
        clientTimeFrom: "",
        clientTimeTo: "",
        current: 1, //默认当前页数为1
        size: 20,
        total: 0,
        type: 0,
        status: "enabled",
      },
      // 日期
      pickerOptions: pickerOptions(),
      dataDisplay_date: "",

      // 红外-深度图缓存
      caise_image: [],
      hongwai_image: [],
      shengdu_image: [],
      renlian_image: [],
    };
  },
  created() {
    this.getImageList()
  },

  methods: {
    ...mapMutations(["setUser"]), //存储User
    //  ...mapGetters(['User']),
    // 图片放大
    imgageFd(index) {
      this.imageBox = true
      this.showImageFd = this.dataDisplay.data_images[index].url
    },
    // 格式化日期
    changeDate() {
      let date = this.dataDisplay_date
      let _d = this.pagingParams
      date && date.length
        ? ((_d.clientTimeFrom = moment(date[0]).format("YYYY-MM-DD")),
          (_d.clientTimeTo = moment(date[1]).format("YYYY-MM-DD")))
        :  _d.createDateFrom = _d.createDateTo = null
    },
    // 处理图片类型参数 imgtype
    imageType_change() {
      this.dataDisplay.imagetype_list.forEach((item, index) => {
        if (this.dataDisplay.imagetype == item.tit)
          this.pagingParams.type = item.type
      })
      // sessionStorage.setItem("imagetype", this.pagingParams.type)
    },

    unitToCanvas(thresholdValue) {
      let _this = this,
        data_images = this.dataDisplay.data_images,
        ctx = document.getElementById("canvas").getContext("2d")
      // let w = 640 //canvas宽度
      // let h = 420 //canvas高度
      // const depThresholdValue = 4000 //深度图峰值
      // const infThresholdValue = 1000 //红外图峰值
      html2canvas(canvas).then((canvas) => {
        for (let i = 0; i < data_images.length; i++) {
          httpUrl(data_images[i].w, data_images[i].h, data_images[i].url);
          let dataURL = canvas.toDataURL("image/png");
          data_images[i].url =  dataURL;
        }
      })
      httpUrl()
      function httpUrl(w, h, url) {
        // let w = 640; //canvas宽度
        // let h = 420; //canvas高度
        let xhr = new XMLHttpRequest()
        xhr.open("get", url, true)
        xhr.responseType = "arraybuffer"
        xhr.onload = function (oEvent) {
          let arrayBuffer = xhr.response
          if (arrayBuffer) {
            let buffer = [new Uint8Array(arrayBuffer)][0],
              data = ctx.createImageData(w, h)
            // console.log(buffer);
            for (let index = 0; index < w * h; index++) {
              let i = index * 4

              let pixel = Math.ceil(
                ((buffer[index * 2 + 1] * 256 + buffer[index * 2]) * 255) /
                  thresholdValue
              )
              if (pixel > 255) pixel = 255

              data.data[i] = pixel
              data.data[i + 1] = pixel
              data.data[i + 2] = pixel
              data.data[i + 3] = 255
            }
            ctx.putImageData(data, 0, 0)
          }
        }
        xhr.send(null)
      }
    },
    // 查询
    onSearch() {
   if(this.pagingParams.type !== 0) {
        this.pagingParams.current = 1
      this.pagingParams.sn = this.dataDisplay.sn
      this.getImageList()
   } else {
    
   }
    },
    // 获取图片列表
    getImageList() {
      let parmas = this.pagingParams
      this.table_loading = true

      imagedata(this.pagingParams).then((res) => {
        if (res.code == 0 && res.data.records.length != 0) {
          this.dataDisplay.data_images = []
          res.data.records.map((x) => {
            this.imgTip = false
            this.dataDisplay.data_images.push({
              url: getImages(x.url),
              w: x.imageWidth,
              h: x.imageHeight,
            })
          })
          parmas.size = res.data.size
          parmas.current = res.data.current
          parmas.total = res.data.total

          // 处理深度图-1
          if (parmas.type == "1") {
            // this.dataDisplay.imagetype = "深度图"
            // this.unitToCanvas(4000)
              this.dataDisplay.data_images = []
              this.imgTip = true
          }
          // 处理红外图-2
          if (parmas.type == "2") {
            // this.dataDisplay.imagetype = "红外图"
            // this.unitToCanvas(1000)
              this.dataDisplay.data_images = []
              this.imgTip = true
          }
          if(parmas.type == "0" || parmas.type == "3") {
             this.dataDisplay.data_images = [
          {
            url: require('../../assets/img/002.png'),
          },
          {
            url: require('../../assets/img/003.png'),
          },
        ]
          }
          this.table_loading = false
        } else {
          this.table_loading = false
          this.dataDisplay.data_images = []
          this.imgTip = true
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pagingParams.size = val
      this.getImageList()
    },
    handleCurrentChange(val) {
      this.pagingParams.current = val
      this.getImageList()
    },
  },
  created() {
    // this.onSearch()
  },
  mounted() {
    // var _this = this
    // this.$nextTick(function () {
    // })
    // let _this = this
    // this.$nextTick(function () {
    //   // imagedata().then((res) => {
    //   //   imagedata({ size: res.data.total }).then((res1) => {
    //   //     res1.data.records.map((item) => {
    //   //       //获取sn下拉列表
    //   //       this.dataDisplay.sn_list.push({
    //   //         SN: item.sn,
    //   //       });
    //   //     });
    //   //   });
    //   // });
    // });
  },
};
</script>
